'use client'
import React, { Fragment, useContext } from 'react'
import BlogContext from '@/context/blogContext';
import BlogCard from './BlogCard';

export default function BlogContent() {
  const { articles, limit } = useContext(BlogContext);

  return (
    <div>
      <div className='max-w-[1400px] w-[96%] mx-auto my-[40px] md:my-[60px] grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 md:gap-4 lg:gap-6 items-stretch'>
        {articles?.length > 0
          ?
          articles?.map(article => (
            <Fragment key={article.id}>{article.status === 0 && <div><BlogCard article={article} /></div>}</Fragment>
          ))
          :
          <>
            {
              Array.from({ length: limit }, (_, i) => (
                <div className="flex w-full flex-col gap-4" key={i}>
                  <div className="skeleton h-32 w-full"></div>
                  <div className="skeleton h-4 w-28"></div>
                  <div className="skeleton h-4 w-full"></div>
                  <div className="skeleton h-4 w-full"></div>
                </div>
              ))
            }
          </>
        }
      </div>
    </div>
  )
}
